export const chartOption = (chartData: any) => {

    const option = {
        backgroundColor: '#1b2735',
        grid: {
            top: '25%',
            left: '-5%',
            bottom: '5%',
            right: '5%',
            containLabel: true,
        },
        tooltip: {
            show: true,
        },
        animation: false,
        xAxis: [
            {
                type: 'category',
                data: chartData.xData,
                axisTick: {
                    alignWithLabel: true,
                },
                nameTextStyle: {
                    color: '#82b0ec',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#82b0ec',
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                    margin: 30,
                },
            },
        ],
        yAxis: [
            {
                show: false,
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: '#0c2c5a',
                    },
                },
                axisLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [40, 10],
                symbolOffset: [0, -6], // 上部椭圆
                symbolPosition: 'end',
                z: 12,
                // "barWidth": "0",
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        // "formatter": "{c}%"
                        fontSize: 15,
                        fontWeight: 'bold',
                        color: '#34DCFF',
                    },
                },
                color: '#2DB1EF',
                data: chartData.yData,
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [40, 10],
                symbolOffset: [0, 7], // 下部椭圆
                // "barWidth": "20",
                z: 12,
                color: '#2DB1EF',
                data: chartData.yData,
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: function (d:number) {
                    return d > 0 ? [50, 15] : [0, 0]
                },
                symbolOffset: [0, 12], // 下部内环
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#2EA9E5',
                        borderType: 'solid',
                        borderWidth: 1,
                    },
                },
                data: chartData.yData,
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [70, 20],
                symbolOffset: [0, 18], // 下部外环
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#19465D',
                        borderType: 'solid',
                        borderWidth: 2,
                    },
                },
                data: chartData.yData,
            },
            {
                type: 'bar',
                //silent: true,
                barWidth: '40',
                barGap: '10%', // Make series be overlap
                barCateGoryGap: '10%',
                itemStyle: {
                    color:{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: chartData.colorList[0] // 0% 处的颜色
                        }, {
                            offset: 1, color: chartData.colorList[1] // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                data: chartData.yData,
            },
        ],
    };

    return option
}